<template>
    <div class="downloadList-item">
        <div class="downloadList-item-icon">

        </div>

        <div class="downloadList-item-text" :class="{'downloadList-item-text_loading':type === 1}">
            <div class="text-filename">
                {{filename}}
            </div>
            <div class="text-fileinfo" v-if="type === 0">
                {{filesize}} MB    -完成
            </div>
            <el-progress v-if="type === 1" style="margin-top: 8px"  :text-inside="false" :percentage="percentage"></el-progress>
        </div>

        <div v-if="type === 0" class="downloadList-item-options">
            <span class="options-btn" @click="openFile">
                    <i class="iconfont icon-wenjian2"></i>
            </span>
            <span class="options-btn" @click="openFilePath">
                    <i class="iconfont icon-wenjian3" style="color: rgba(255,188,52,1)"> </i>
            </span>
        </div>

    </div>
</template>

<script>
    export default {
        name: "downloadList-item",
        props:{
            type:{
                type:Number,
                default:0
            },
            filename:{
                type:String,
                default:"未知"
            },
            filesize:{
                type:String,
                default:"未知"
            },
            percentage:{
                type:Number,
                default:1
            },
            filepath:{
                type:String,
                default:""
            },
            fileicon:{
                type:String,
                default:""
            },
            id:{
                type:Number,
                required:true
            }
        },
        methods:{
            openFile(){
                let Judge = this.$electron.shell.openItem(`${this.filepath}\\${this.filename}`)
                this.$message({
                    message:Judge?'打开成功!':"打开失败!",
                    type: Judge?'success':"error"
                });
            },
            openFilePath(){
                let Judge = this.$electron.shell.openItem(`${this.filepath}`)
                this.$message({
                    message:Judge?'打开成功!':"打开失败!",
                    type: Judge?'success':"error"
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .downloadList-item{
        padding: 5px;
        height: 48px;
        border-bottom: 1px solid #ccc;
        display: flex;
        &-icon{
            height: 100%;
            width: 52px;
            background-color: red;
        }
        &-text{
             width: 350px;
             padding: 0 10px;
             .text-filename{
                 height: 20px;
                 line-height: 20px;
                 font-size: 12px;
                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
             }
             .text-fileinfo{
                height: 28px;
                line-height: 28px;
                font-size: 14px;
                color: rgba(128,128,128,1);
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
            }
             &_loading{
                width: 450px;
             }
        }
        &-options{
            line-height: 48px;
            align-items: center;
            cursor: pointer;
            .iconfont{
                color: #333;
                font-size: 21px;
            }
        }
        .options-btn{
            padding: 8px 5px 5px 5px;
            border: 1px solid #fff;
            &:hover{
                border: 1px solid #ccc;
                border-radius: 2px;
            }
        }
    }
</style>
